<nz-card [nzBordered]="false">
  <section class="search-section">
    <input nz-input placeholder="订单号、客户姓名、客户电话" [(ngModel)]="keyword" class="search-item"/>
    <nz-select [(ngModel)]="productId" [nzPlaceHolder]="'查询产品'" class="search-item" [nzAllowClear]="true">
      <nz-option
        *ngFor="let option of allProducts"
        [nzLabel]="option.title"
        [nzValue]="option.id">
      </nz-option>
    </nz-select>
    <button nz-button [nzType]="'primary'" nzGhost (click)="search()" class="search-item">
      <i class="anticon anticon-search"></i><span>搜索</span>
    </button>
  </section>
  <nz-table #nzTable [nzData]="page.content"
            [nzPageSize]="page.size"
            [nzTotal]="page.totalElements"
            [nzFrontPagination]="false"
            [(nzPageIndex)]="page.number"
            (nzPageIndexChange)="changePageNo($event)"
            [nzLoading]="isLoading">
    <thead>
    <tr>
      <th nz-th><span>序号</span></th>
      <th nz-th><span>订单号</span></th>
      <th nz-th><span>支付方式</span></th>
      <th nz-th><span>客户姓名</span></th>
      <th nz-th><span>客户电话</span></th>
      <th><span>产品名称</span></th>
      <th nz-th><span>状态</span></th>
      <th nzShowSort [(nzSort)]="sortMap.saveTime" (nzSortChange)="sort('saveTime',$event)" style="min-width: 162px;"><span>下单时间</span></th>
      <th nzShowSort [(nzSort)]="sortMap.payTime" (nzSortChange)="sort('payTime',$event)" style="min-width: 166px;"><span>支付（确认）时间</span></th>
      <th nz-th><span>操作</span></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of nzTable.data;let i=index">
      <td>
        {{i+1}}
      </td>
      <td>{{data.orderNo}}</td>
      <td>{{data.paymentMethod|dicsNamePipe:paymentMethod}}</td>
      <td>{{data.postalName}}</td>
      <td>{{data.postalPhone}}</td>
      <td>{{data.productId|dicsNamePipe:allProducts:"id":"title"}}</td>
      <td *ngIf="data.paymentMethod == 3 || data.paymentMethod == 4" >{{data.voucherStatus|dicsNamePipe:cakeOrderVoucherStatusOption}}</td>
      <td *ngIf="data.paymentMethod == 1">{{data.status|dicsNamePipe:cakeOrderStatusOption}}</td>
      <td *ngIf="data.paymentMethod == 2">{{data.serviceStatus|dicsNamePipe:cakeOrderServiceStatusOption}}</td>
      <td>{{data.ordersDate}}</td>
      <td>{{data.payTime}}</td>
      <td>
        <a href="javascript:void (0);" (click)="seeEntity(data)">查看详情</a>
        <span *ngIf="data.status == 2 && data.paymentMethod == 1">
          <nz-divider nzType="vertical"></nz-divider>
          <a href="javascript:void (0);" (click)="logistics(data)">确认发货</a>
        </span>
        <span *ngIf=" data.paymentMethod == 2">
          <nz-divider nzType="vertical"></nz-divider>
          <a href="javascript:void (0);" (click)="auditing(data)">联系情况</a>
        </span>
        <span *ngIf=" data.paymentMethod == 3 || data.paymentMethod == 4">
          <span *ngIf="data.voucherStatus == 3">
            <nz-divider nzType="vertical"></nz-divider>
            <a href="javascript:void (0);" (click)="logistics(data)">确认发货</a>
          </span>
          <span *ngIf="data.voucherStatus == 2">
            <nz-divider nzType="vertical"></nz-divider>
            <nz-popconfirm [nzTitle]="'确定已核对凭证信息正常，将这条数据状态置为已确认吗？'" (nzOnConfirm)="payAuditing(data)">
              <a nz-popconfirm>确认已付款</a>
            </nz-popconfirm>
            <nz-divider nzType="vertical"></nz-divider>
            <a href="javascript:void (0);" (click)="rejectPayAuditing(data)">驳回凭证</a>
          </span>
        </span>
      </td>
    </tr>
    </tbody>
  </nz-table>
</nz-card>

<pic-viewer [picList]="picList" [picIdx]="0" [show]="isShowPic" (onClose)="onPicClose($event)"></pic-viewer>
